<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <meta http-equiv="Content-Script-Type" content="text/javascript">

        <title>Radiance Export</title>
        
        <!-- log panel for debugging -->
        <script type="text/javascript" src="./blackbirdjs/blackbird.js"></script>
        
        <!-- google map and jsr_class for geonames.org requests -->
	<!--
	<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAVkCvvMxWS6sy1KKSLvN3URTDis0fJxnS-wzgwKhlyWVJxXLRhxQq9kdL_d2nO8XPOQO2xIrAWCmccw"></script>
	-->
	<script type="text/javascript" src="./js/lib/jsr_class.js"></script>
        
        <!-- jquery and plugins -->
        <script type="text/javascript" src="./js/lib/jquery-1.2.6.js"></script>
        <script type="text/javascript" src="./js/lib/jquery.history_remote.pack.js"></script>
        <script type="text/javascript" src="./js/lib/jquery.tabs.pack.js"></script>
        <script type="text/javascript" src="./js/lib/jquery.alphanumeric.js"></script>
        <script type="text/javascript" src="./js/lib/jquery.filetree.js"></script>
        <script type="text/javascript" src="./js/lib/jqModal.js"></script>
        <script type="text/javascript" src="./js/lib/ui/ui.core.1.5.3.js"></script>
        <script type="text/javascript" src="./js/lib/ui/ui.draggable.1.5.3.js"></script>
        <script type="text/javascript" src="./js/lib/ui/ui.droppable.1.5.3.js"></script>
        
        <!-- su2rad specific javascript files -->
        <script type="text/javascript" src="./js/su2rad_tooltip.js"></script>
        <script type="text/javascript" src="./js/su2rad_test.js"></script>
        <script type="text/javascript" src="./js/su2rad_backend_interface.js"></script>
        <script type="text/javascript" src="./js/su2rad.fileselector.js"></script>
        <script type="text/javascript" src="./js/su2rad_export.js"></script>
        <script type="text/javascript" src="./js/su2rad_views.js"></script>
        <script type="text/javascript" src="./js/su2rad_googlemap.js"></script>
        <script type="text/javascript" src="./js/su2rad_geonames.js"></script>
        <script type="text/javascript" src="./js/su2rad_sky.js"></script>
        <script type="text/javascript" src="./js/su2rad_location.js"></script>
        <script type="text/javascript" src="./js/su2rad_radopts.js"></script>
        <script type="text/javascript" src="./js/su2rad_materials.js"></script>
        <script type="text/javascript" src="./js/su2rad_dialog.js"></script>

        <script type="text/javascript">
            /* create tabs */
            $(function() {
                $('#tab-container').tabs(1, {
                    //disabled: [5], 
                    onClick: function(a,s,h) { onTabClick(a,s,h); },
                    onHide:  function(a,s,h) { onTabHide(a,s,h); },
                    onShow:  function(a,s,h) { onTabShow(a,s,h); }
                } );
            });
            $().ready(function() {
                $('#progressWindow').jqm();
                $('#progressWindow').jqmAddTrigger('.showProgress');
                $('#fileSelectorWindow').jqm();
                $('#fileSelectorWindow').jqmAddTrigger('.selectButton');
                
            });
            //log.toggle();
        </script>

        <!-- style sheet for the rest of the dialog -->
        <link rel="stylesheet" href="./blackbirdjs/blackbird.css" type="text/css" media="screen">
        <link rel="stylesheet" href="./css/dialog.css"            type="text/css" media="print, projection, screen">
        <link rel="stylesheet" href="./css/jqModal.css"           type="text/css" media="screen">
        <link rel="stylesheet" href="./css/jquery.tabs.css"       type="text/css" media="print, projection, screen">
        <link rel="stylesheet" href="./css/jquery.filetree.css"   type="text/css"  media="screen" />
        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 8]>
        <link rel="stylesheet" href="./css/jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <link rel="stylesheet" href="./css/dialog-ie.css" type="text/css" media="print, projection, screen">
        <![endif]-->
    
    </head>
    
    <body style="background-color: white" onLoad="initPage()">
        
        <!-- file selector popup -->
        <div class="jqmWindow2" id="fileSelectorWindow">
            <h3>Select file ...</h3>
            <div id="fileSelectorTree" class="fileSelector"></div>
            <div id="fileSelectorNote">selected: </div>
            <input class="exportbutton" type="button" id="fileSelectorButtonSelect" value="select file" onclick="fileSelector.select()" disabled>
            <input class="exportbutton" type="button" id="fileSelectorButtonCancel" value="cancel" onclick="fileSelector.close()">
        </div>
        
        <input type="button" id="showLogButton" name="showLogButton" value="log" onclick="log.toggle()">
    
        <div id="tab-container">
            <ul class="tabs-nav">
                <li><a href="#tab-export"><span>Export</span></a></li>
                <li><a href="#tab-render"><span>Render</span></a></li>
                <li><a href="#tab-sky"><span>Sky</span></a></li>
                <li><a href="#tab-views"><span>Views</span></a></li>
                <li><a href="#tab-materials"><span>Materials</span></a></li>
                <!-- <li><a href="#tab-fields"><span>Fields</span></a></li> -->
                <!-- <li><a href="#tab-climate"><span>Climate</span></a></li> -->
            </ul>

            
            <!-- TAB export -->
            
            <div id="tab-export">
                <h3>
                    Export Options
                </h3>
                <div id="exportOptions">
                    
                    <!-- export path -->
                    <div class="gridRow">
                        <!-- div class="gridLabel">path:</div>
                        <div class="gridCell" style="width:305px;">
                            <div class="fileinputs" id="sceneFileSelection">
                                <input type="file" class="file" id="fileselection" onchange="onSelectExportPath()" />
                                <div class="fakefile">
                                    <img src="./css/24-zoom.png" />
                                </div>
                            </div>
                            <input type="text" style="width:275px;" name="scenePath" id="scenePath" value="."
                            onchange="setExportPath()"/>
                        </div -->
                            
                        <div class="gridLabel">path:</div>
                        <div class="gridCell" style="width:305px;">
                            <input type="text" style="width:275px;" name="scenePath" id="scenePath" value="." onchange="setExportPath()"/>
                            <a onclick="fileSelector.show()">
                                <img class="fileSelectorIcon" src="./css/24-zoom.png"/>
                            </a>
                        </div>
                    </div>
                    <div class="gridRow">
                        <div class="gridLabel">scene:</div>
                        <div class="gridCell" style="width:385px;">
                            <input type="text" class="fileNameInput" style="width:275px;" name="sceneName" id="sceneName" value="unnamed.rif"
                                onchange="setExportPath()"/>
                            <input type="button" id="loadSceneButton" class="loadbutton" style="display:none;" value="load" onclick="onLoadSceneFile()"/>
                        </div>
                    </div>

                    <!-- export options -->
                    <div class="gridRow" style="margin-top:5px;">
                        <div class="gridLabel">mode:</div>
                        <div class="gridCell">
                            <select id="exportMode" name="exportMode" onchange="onExportModeChange()">
                                <option value="by group">by group</option>
                                <option value="by layer">by layer</option>
                                <option value="by color" selected>by color</option>
                                <option value="daysim" selected>daysim</option>
                            </select>
                        </div>
                        <div class="gridCell">
                            <input id="triangulate" type="checkbox"
                            onClick="onExportBoolOption('triangulate')"> triangulate
                        </div>
                    </div>
                    <div class="gridRow">
                        <div class="gridLabel"></div>
                        <div class="gridCell">
                            <span id="global_coords_display" style="display:none;">
                                <input id="global_coords" type="checkbox" 
                                onClick="onExportBoolOption('global_coords')"> global coords
                            </span>
                        </div>
                        <div class="gridCell">
                            <span id="textures_display">
                                <input id="textures" type="checkbox"
                                onClick="onExportBoolOption('textures')">
                                <span id="textures_label"> textures</span>
                            </span>
                        </div>
                    </div>
                </div>

                
                <!-- ###   VIEWS   ### --> 
                <h3>
                    <!-- <input class="floatright" type="button" value="edit" onclick="switch_to_tab('tab-views')"> -->
                    Views
                    <span id="selectAllViews" style="font-size:12px;margin-left:10px;">
                        <a class="clickable" onclick="selectAllViews()">select all</a>
                    </span>
                </h3>
                <div id="viewsSelection">
                <!-- use this space for test data button --> 
                <input type="button" id="testDataButton" name="testDataButton" value="load test data" onclick="loadTestData()">
            
                </div>
                
                
                <!-- ###   RENDER   ### --> 
                <h3>
                    <!-- <input class="floatright" type="button" value="edit" onclick="switch_to_tab('tab-render')"> -->
                    Render Options
                </h3>
                <div id="renderSummary">
                    <div class="gridRow">
                        <div class="gridLabel">quality:</div>
                        <div class="gridCell">
                            <select id="radQuality_1" name="radQuality_1" onchange="onRadOptionChange('radQuality_1')">
                                <option value="high">high</option>
                                <option value="medium" selected>medium</option>
                                <option value="low">low</option>
                            </select>
                        </div>
                        <div class="gridLabel">img x:</div>
                        <div class="gridCell">
                            <input type="text" class="numeric_int" size="5" name="radImageSizeX_1" id="radImageSizeX_1" value="512" onchange="onRadOptionChange('radImageSizeX_1')" />
                        </div>
                    </div>
                    <div class="gridRow">
                        <div class="gridLabel">detail:</div>
                        <div class="gridCell">
                            <select id="radDetail_1" name="radDetail_1" onchange="onRadOptionChange('radDetail_1')">
                                <option value="high">high</option>
                                <option value="medium" selected>medium</option>
                                <option value="low">low</option>
                            </select>
                        </div>
                        <div class="gridLabel">img y:</div>
                        <div class="gridCell">
                            <input type="text" class="numeric_int" size="5" name="radImageSizeY_1" id="radImageSizeY_1" value="512" onchange="onRadOptionChange('radImageSizeY_1')" />
                        </div>
                    </div>
                    <div class="gridRow">
                        <div class="gridLabel">varia:</div>
                        <div class="gridCell">
                            <select id="radVariability_1" name="radVariability_1" onchange="onRadOptionChange('radVariability_1')">
                                <option value="high" selected>high</option>
                                <option value="medium">medium</option>
                                <option value="low">low</option>
                            </select>
                        </div>
                        <div class="gridLabel">type:</div>
                        <div class="gridCell">
                            <select id="radImageType_1" name="radImageType_1" style="width: 90px;" onchange="selectImageType('radImageType_1')">
                                <option value="normal" selected>normal</option>
                                <option value="irridiance">irridiance</option>
                            </select>
                        </div>
                    </div>
                    <div class="gridRow" style="margin-top:5px;">
                        <div class="gridLabel">render:</div>
                        <div class="gridCell" style="width:400px">
                            <span class="commandLine" id="radRenderLine_1"></span>
                            <!-- <input type="text" class="column2" name="radRenderLine_1" id="radRenderLine_1" value="" onchnge="onRenderLineChange(this.value)"/> -->
                        </div>
                    </div>
                </div>
                
                
                <h3>
                    <!-- <input class="floatright" type="button" value="edit" onclick="switch_to_tab('tab-sky')"> -->
                    Sky
                </h3>
                <div id="locationSummary">
                    <div class="gridRow">
                        <div class="gridLabel">location:</div>
                        <div class="gridCell" style="width: 280px">
                            <span id="skySummaryLocation">town, country</span>
                        </div>
                        <div class="gridLabel">
                            north:
                        </div>
                        <div class="gridCell" style="width:50px;">
                            <span id="skySummaryNorth">0.00</span>
                        </div>
                    </div>
                    <div class="gridRow" style="width:585px;">
                        <div class="gridLabel">sky cmd:</div>
                        <div class="gridCell" style="width:505px;">
                            <span id="skySummaryOptions">summary of sky settings (gensky ...)</span>
                        </div>
                    </div>
                </div>
                
                 
                <h3 style="display:none;">
                    <input class="floatright" type="button" id="edit_climate" style="display:none;" value="edit" onclick="switch_to_tab('tab-climate')" disabled>
                    <input type="checkbox" id="climate_checkbox" value="climate"
                    onClick="toggleClimateTab()"> Climate Data
                </h3>
                <div id="climateSummary" style="display:none;">
                    <div class="gridRow">
                        <div class="gridLabel">climate:</div>
                        <div class="gridCell" style="width:490px">
                            <i>climate data file</i>
                        </div>
                    </div>
                    <div class="gridRow">
                        <div class="gridLabel">climate:</div>
                        <div class="gridCell" style="width:490px">
                            <i>processing options</i>
                        </div>
                    </div>
                </div>

                
                <h2>
                    <input class="exportbutton" type="button" name="export" value="export" onclick="onExportButton()">
                    <input class="exportbutton" type="button" name="cancel" value="cancel" onclick="onCancelButton()">
                </h2>
            
                <div class="statusMessage" id="status_tab-export" style="display:none;">
                    msg
                </div>
                <div class="jqmWindow" id="progressWindow">
                    <img src="./css/ajax-loader-1500ms.gif" />
                    <div id="progressStatus">
                        export in progress
                    </div>
                </div>
            
            </div>
            

            <!-- tab contents -->

            
            <!-- TAB render -->
            
            <div id="tab-render">
                <h3>
                    <!-- <input class="floatright" type="button" value="done" onclick="switch_to_tab('tab-export')"> -->
                    Render Settings
                </h3>
                
                <div id="radOptions" style="border-color:red;height:220px;">
                    <div class="gridColumn">
                        <div class="optionsHeader">
                            <span>Quality</span>
                        </div>
                        <div class="gridLabel">quality:</div>
                        <div class="gridCell">
                            <select id="radQuality_2" name="radQuality_2" onchange="onRadOptionChange('radQuality_2')">
                                <option value="high">high</option>
                                <option value="medium" selected>medium</option>
                                <option value="low">low</option>
                            </select>
                        </div>
                        <div class="gridLabel">detail:</div>
                        <div class="gridCell">
                            <select id="radDetail_2" name="radDetail_2" onchange="onRadOptionChange('radDetail_2')">
                                <option value="high">high</option>
                                <option value="medium" selected>medium</option>
                                <option value="low">low</option>
                            </select>
                        </div>
                        <div class="gridLabel">varia:</div>
                        <div class="gridCell">
                            <select id="radVariability_2" name="radVariability_2" onchange="onRadOptionChange('radVariability_2')">
                                <option value="high" selected>high</option>
                                <option value="medium">medium</option>
                                <option value="low">low</option>
                            </select>
                        </div>
                        <div class="gridLabel">indirect:</div>
                        <div class="gridCell">
                            <select id="radIndirect" name="radIndirect" onchange="onRadOptionChange('radIndirect')">
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2" selected>2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                        <div class="gridLabel" style="font-size: 12px;">penumbra:</div>
                        <div class="gridCell">
                            <input type="checkbox" id="radPenumbras" checked onClick="onRadOptionChange('radPenumbras')" /> 
                        </div>
                    </div>        

                    
                    <div class="gridColumn">
                        <div class="optionsHeader">
                            <span>Image</span>
                        </div>
                        <div class="gridLabel">size x:</div>
                        <div class="gridCell">
                            <input type="text" class="numeric_int" size="4" name="radImageSizeX_2" id="radImageSizeX_2" value="512" onchange="onRadOptionChange('radImageSizeX_2')" />
                        </div>
                        <div class="gridLabel">size y:</div>
                        <div class="gridCell">
                            <input type="text" class="numeric_int" size="4" name="radImageSizeY_2" id="radImageSizeY_2" value="512" onchange="onRadOptionChange('radImageSizeY_2')" />
                        </div>
                        <div class="gridLabel">type:</div>
                        <div class="gridCell">
                            <select id="radImageType_2" name="radImageType_2" style="width: 90px;" onchange="selectImageType('radImageType_2')">
                                <option value="normal" selected>normal</option>
                                <option value="irridiance">irridiance</option>
                            </select>
                        </div>
                        
                        <div class="optionsHeader">
                            <span>Zone</span>
                        </div>
                        <div class="gridLabel">size:</div>
                        <div class="gridCell">
                            <input type="text" class="numeric_float" name="radZoneSize" id="radZoneSize" size="6" value="10.0" onchange="onRadOptionChange('radZoneSize')"/>
                        </div>
                        <div class="gridLabel">type:</div>
                        <div class="gridCell">
                            <select id="radZoneType" name="radZoneType" onchange="onRadOptionChange('radZoneType')">
                                <option value="exterior" selected>exterior</option>
                                <option value="interior">interior</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="gridColumn">
                        <div class="optionsHeader">
                            <span>Report</span>
                        </div>
                        <div class="gridLabel">time:</div>
                        <div class="gridCell">
                            <select id="radReport" name="radReport" onchange="onRadOptionChange('radReport')">
                                <option value="0" selected>none</option>
                                <option value="60">1 min</option>
                                <option value="120">2 min</option>
                                <option value="180">3 min</option>
                                <option value="300">5 min</option>
                                <option value="600">10 min</option>
                            </select>
                        </div>
                        <div class="gridLabel">file:</div>
                        <div class="gridCell">
                            <input type="text" class="fileNameInput" size="40" style="width:85px;" name="radReportFile" id="radReportFile" value="scene.log" onchange="onRadOptionChange('radReportFile')" />
                        </div>
                    </div>
                    <div class="gridColumn" style="clear:both;width:585px;margin-top:5px;">
                        <div class="gridLabel">render:</div>
                        <div class="gridCell" style="width:300px">
                            <input type="text" style="width:287px;" name="radRenderLine_2" id="radRenderLine_2" value="" onchange="onRenderLineChange(this.value)" />
                        </div>
                    </div>
                </div>
                
                <h3>
                    details
                </h3>
                <div id="rpictOptionsDisplay">
                    <input type="button" value="show details" onclick="updateRpictValues()">
                </div>
                
                <div class="statusMessage" id="status_tab-render" style="display:none;">
                    msg
                </div>
            
            </div>
            
            
            <!--  TAB sky  --> 
            
            <div id="tab-sky">
                <h3>
                    <input type="button" id="applyLocationValues" value="apply" class="floatright" onclick="onApplySkySettingsToModel()" disabled=true />
                    <input type="button" id="reloadShadowInfo" value="reload" class="floatright" style="display:none;" onclick="getSkySettings()">
                    SketchUp model settings
                </h3>
                
                <h3>
                    <!-- <input class="floatright" type="button" value="done" onclick="switch_to_tab('tab-export')"> -->
                    Sky Settings
                </h3>
                <div class="optionsColumn" style="height:120px">
                    <div class="optionsHeader">
                        <span class="gridLabel">generator:</span>
                        <select id="skyGenerator" name="skyGenerator" onchange="onSkyGenChange()">
                            <option value="gensky" selected>gensky</option>
                            <!--<option value="gendaylit">gendaylit</option>-->
                            <!--<option value="hdr-image">hdr-image</option>-->
                        </select>
                    </div>
                    
                    <div class="optionsRow" id="genskyTypeOptions" style="width:210px">
                        <div class="optionsRow" style="width:160px">
                            <span class="gridLabel">type:</span>
                            <select id="genskySkyType" name="genskySkyType" style="width:80px;" onchange="onSkyTypeChange()">
                                <option value="u">uniform</option>
                                <option value="c" selected>overcast</option>
                                <option value="i">interm.</option>
                                <option value="s">clear</option>
                            </select>
                        </div>
                        <div id="genskySunOption" style="display:none;width:45px">
				<input type="checkbox" id="sunOptionCB" value="sunOption"
				onClick="onSkyTypeChange()"><span style="font-size:12px">sun</span>
                        </div>
                    </div>
                    
                    <div class="optionsRow" id="gendaylitTypeOptions">
                        <div class="optionsRow">
                            <span class="gridLabel">params:</span>
                            <select id="gendaylitSkyType" name="gendaylitSkyType" style="width:120px;" onchange="onSkyTypeChange()">
                                <option value="P">epsilon/delta</option>
                                <option value="W" selected>irridiance</option>
                                <option value="L">illuminance</option>
                            </select>
                        </div>
                    </div>
                
                    <div class="optionsRow">
                        <span class="gridLabel">date:</span>
                        <input type="text" class="timeOptionInput" name="skyDateMonth" id="skyDateMonth" value="03"
                        onchange="onSkyDateTimeChange('skyDateMonth')"/>
                        <span class="skyOption" style="width:12px">/</span>
                        <input type="text" class="timeOptionInput" name="skyDateDay" id="skyDateDay" value="21"
                        onchange="onSkyDateTimeChange('skyDateDay')"/>
                    </div>
                
                    <div class="optionsRow">
                        <span class="gridLabel">time:</span>
                        <input type="text" class="timeOptionInput" name="skyTimeHour" id="skyTimeHour" value="12"
                        onchange="onSkyDateTimeChange('skyTimeHour')"/>
                        <span class="skyOption" style="width:12px">:</span>
                        <input type="text" class="timeOptionInput" name="skyTimeMinute" id="skyTimeMinute" value="00"
                        onchange="onSkyDateTimeChange('skyTimeMinute')"/>
                    </div>

                </div>

                <div class="skyGeneratorOptions" id="skyOptsGensky">
                    <!-- filled in by javascript -->
                </div>
                
                <div class="skyGeneratorOptions" id="skyOptsGendaylit" style="display:none">
                    <div class="optionsHeader" style="width:280px;">
                        <span class="gridLabel" style="width:240px">TODO gendaylit options:</span>
                    </div>
                    <div class="optionsColumn">
                        <div class="rpictOverrideHeader">general</div>
                        <div class="optionsRow">
                            <input type="checkbox" id="sunOptionCB" style="float:left;" value="sunOption" onClick="onSkyTypeChange()">
                            <span class="gridLabel" style="width:60px;">no sun</span>
                        </div>
                    </div>
                </div>
                <div class="skyGeneratorOptions" id="skyOptsHDRImage" style="display:none">
                    <div class="optionsHeader" style="width:340px;">
                        <span class="gridLabel" style="width:240px">TODO hdr-image options:</span>
                    </div>
                    <div class="gridLabel" style="width:40px;">path:</div>
                    <div class="gridCell" style="width:305px;">
                        <div class="fileinputs">
                            <input type="file" class="file" id="fileselection" onchange="onSelectSkyImage()" />
                            <div class="fakefile">
                                <img src="./css/24-zoom.png" />
                            </div>
                        </div>
                        <input type="text" style="width:275px;" name="skyImagePath" id="skyImagePath" value=".pic"/>
                    </div>
                </div>
                            
                <div style="clear:both;"></div>
                
                <div class="optionsRow" style="float:none;width:600px;">
                    <span class="commandLine" id="skyCommandLine">cmd: !gensky</span> 
                </div>
                            
                <h3>
                    <!-- <input class="floatright" type="button" value="done" onclick="switch_to_tab('tab-export')"> -->
                    Location Settings
                </h3>
                
                <div class="optionsColumn">
                    <div class="optionsRow">
                        <span class=gridLabel>City:</span>
                        <input type="text" class="inputCityCountry" name="City" id="City" value="City" tabindex="1" onchange="onCityCountryChanged()"/>
                    </div>
                    <div class="optionsRow">
                        <span class=gridLabel>Country:</span>
                        <input type="text" class="inputCityCountry" name="Country" id="Country" value="Country" tabindex="2" onchange="onCityCountryChanged()"/>
                    </div>
                </div>
                
                <div class="optionsColumn" style="width:170px;">
                    <div class="optionsRow" style="width:160px;">
                        <span class="gridLabel">Latitude:</span>
                        <input type="text" class="locationOptionInput" name="Latitude" id="Latitude" value="56.7" tabindex="4" onchange="onLatLongChange()" />
                    </div>
                    <div class="optionsRow" style="width:160px;">
                        <span class="gridLabel">Longitude:</span>
                        <input type="text" class="locationOptionInput" name="Longitude" id="Longitude" value="0.12" tabindex="5" onchange="onLatLongChange()"/>
                    </div>
                    <div class="optionsRow" style="width:160px;height:14px;min-height:14px;">
                        <div class="gridLabel">
                            <span class="controlValue">Radiance:</span>
                        </div>
                        <span class="controlValue" id="radianceLongitude">-o </span>
                    </div>    
                    <div class="optionsRow" style="width:160px;height:14px;min-height:14px;">
                        <span class="controlValue" id="meridianWarning"></span>
                    </div>
                </div>
                
                <div class="optionsColumn" style="width:180px;">
                    <div class="optionsRow" style="width: 170px;">
                        <span class=gridLabel style="width:60px;">north:</span>
                        <input type="text" class="locationOptionInput" name="NorthAngle" id="NorthAngle" value="12.3" tabindex="6" onchange="onNorthAngleChange()" />
                    </div>
                    <div class="optionsRow" style="width: 170px;">
                        <span class=gridLabel style="width:60px;" id="TZOffsetLable">tzone:</span>
                        <select name="TZOffset" id="TZOffset" tabindex="7" style="width:110px;"
                            onchange="onSelectTZ()" onmousedown="clearTZWarning()">
                            <option value="13"  >NZDT +13</option>
                            <option value="12"  >NZST +12</option>
                            <option value="11"  >AEDT +11</option>
                            <option value="10.5">ACDT +10.5</option>
                            <option value="10"  >AEST +10</option>
                            <option value="9.5" >ACST +9.5</option>
                            <option value="9"   >AWDT +9</option>
                            <option value="8"   >AWST +8</option>
                            <option value="7"   >CXT +7</option>
                            
                            <option value="6"   >none +6</option>
                            <option value="5"   >none +7</option>
                            
                            <option value="4" >MSD +4</option>
                            <option value="3" >EEST/MSK +3</option>
                            <option value="2" >EET/CEST +2</option>
                            <option value="1" >CET/WEST +1</option>
                            <option value="0" selected>GMT/WET +0</option>
                            <option value="-1"   >none -1</option>
                            <option value="-2"   >none -2</option>
                            <option value="-2.5" >NDT -2.5</option>
                            <option value="-3"   >ADT -3</option>
                            <option value="-3.5" >NST -3.5</option>
                            <option value="-4"   >AST/EDT -4</option>
                            <option value="-5"   >EST -5</option>
                            <option value="-6"   >MDT -6</option>
                            <option value="-7"   >MST/PDT -7</option>
                            <option value="-8"   >PST/AKDT -8</option>
                            <option value="-9"   >AKST -9</option>
                            <option value="-10"  >none -10</option>
                            <option value="-11"  >none -11</option>
                            <option value="-12"  >none -12</option>
                        </select>
                    </div>
                    <div class="optionsRow" style="width:170px;height:14px;min-height:14px;">
                        <span class="controlValue" id="meridianDisplay" style="margin-left:62px";>-m</span>
                    </div>
                </div>
                        
                <div style="clear:both;"></div>
                        
                

                <h3>
                    <input type="checkbox" id="useGoogleMap" value="useGoogleMap"
                    onClick="toggleGoogleMap()"><span id="googleMapHeader"> use Google Map</span>
                </h3>
                <div id="googleMapPanel" style="display:none; width:580px;">
                    <div style="margin-left: 30px; width: 400px;">
                        <span style="width: 100px; float: left;">
                            <input type="button" id="googleMapLookup" value="map lookup" onclick="googleMapLookup()" disabled=true />
                        </span>    
                        <input type="checkbox" id="doGeoNamesLookup" checked /> geonames lookup
                    </div>    
                    <!-- this map canvas code is taken from the google examples --> 
                    <div id="map_canvas" style="left: 30px; margin-top: 5px; width: 520px; height: 320px"></div>
                    <div id="message" style="margin-left: 32px; width: 518; font-size: 12px;">&nbsp;</div>
                </div>
                
                <div class="statusMessage" id="status_tab-sky">
                    msg
                </div>
                <h3 style="display:none;">
                    <input type="button" value="apply" class="floatright" onclick="onApplySkySettingsToModel()" />
                    <input type="button" value="reload" class="floatright" onclick="getSkySettings()">
                    test buttons
                </h3>
            
            </div>

            
            <!-- TAB views -->
            
            <div id="tab-views" style="display:none;">
                <h3>
                    <!-- <input class="floatright" type="button" value="done" onclick="switch_to_tab('tab-export')"> -->
                    View Details
                </h3>
                <div id="viewDetails">
                    <input type="button" id="testDataButton" name="testDataButton" value="load test data" onclick="loadTestData()">
                </div>
                <div class="statusMessage" id="status_tab-views">
                    msg
                </div>
            
            </div>
            
            
            <!-- TAB materials -->
            
            <div id="tab-materials" style="display:none;">
                <h3>Materials</h3>
                <div id="MaterialsDetails">
                    <div class="listPanel" style="margin-left:5px;">
                        <div class="listOptions">
                            <div>Radiance names
                                <input type=checkbox class="cbListOption"
                                id="showRadianceName" onclick="onChangeSkmLabel()">
                            </div>
                        </div>
                        <div class="mlistPanel" id="skmListPanel">
                            <input type="button" id="testDataButton" name="testDataButton" value="load test data" onclick="loadTestData()">
                        </div>
                    </div>
                    <div class="listPanel" style="float:none;">
                        <div class="listOptions">
                            <div style="float:left;margin:0;margin-left:3px;margin-top:1px;">
                                <select style="width:100px;" id="showMaterialGroup" onchange="buildMaterialListRad()">
                                    <option value="all" selected>all</option>
                                </select>
                            </div>
                            <!-- <div>light<input type=checkbox class="cbListOption" id="showDefType_light" onclick="buildMaterialListRad()"></div> -->
                            <!-- <div>pattern<input type=checkbox class="cbListOption" id="showDefType_pattern" onclick="buildMaterialListRad()"></div> -->
                            <div>alias<input type=checkbox class="cbListOption" id="showDefTypeAlias" onclick="buildMaterialListRad()"></div>
                        </div>
                        <div class="mlistPanel" id="radListPanel"></div>
                    </div>
                    
                    <div class="detailsPanel" id="containerDetails">
                        <div class="detailsPanel" id="panelPreview"></div> 
                        <div class="detailsPanel" id="panelDetails">
                            <div class="listOptions">
                                <div>show required<input type=checkbox class="cbListOption" id="showDetailsRequired"></div>
                                <!-- <div>color<input type=checkbox class="cbListOption" id="showDetailsColor"></div> -->
                                <span id="panelDetailsTitle">title</span>
                            </div>
                            <div class="textDisplay" id="panelDetailsText"> details text</div>
                        </div>
                    </div> 
                </div>
                <div class="statusMessage" id="status_tab-materials">
                    msg
                </div>
            
            </div>
            
            
            <!-- TAB fields -->
            
            <div id="tab-fields" style="display:none;">
                <h3>Numeric Fields</h3>
                TODO<br/>
                TODO<br/>
                TODO
                
                <div class="statusMessage" id="status_tab-fields">
                    msg
                </div>
            
            </div>
            
            
            <!-- TAB climate -->
            
            <div id="tab-climate" style="display:none">
                <h3>
                    <!-- <input class="floatright" type="button" value="done" onclick="switch_to_tab('tab-export')"> -->
                    Climate Data
                </h3>
                
                <div>*** MOCKUP PAGE *** MOCKUP PAGE *** MOCKUP PAGE *** MOCKUP PAGE ***</div>
                <div>
                    <img src="./img/climate_data_plot.jpg" width="480px;"/>
                </div>
                
                <div class="statusMessage" id="status_tab-climate">
                    msg
                </div>
                
            </div>
            
        </div>

        <script type="text/javascript">
            // input restrictions via jquery.alphanumeric
            $('.timeOptionInput').numeric();
            $('.numeric_int').numeric();
            $('.numeric_float').numeric({allow:"."});
            $('.skyOptionInput').numeric({allow:"."});
            $('.locationOptionInput').numeric({allow:".-"});
            $('.fileNameInput').alphanumeric({allow:"._"});
        </script>

    </body>
</html>
